<template>
	<view>
		<view class="c-box" id="editSamplebook" >
			<view class="edit">
				<view class="ul">
					<view class="li">
						<view class="span">样册名称</view>
						<input type="text" v-model="samplebook.bookName" contenteditable />
					</view>
					<view class="li">
						<view class="span">标签</view>
						<view  class="num span" style="float: right" >{{samplebook.tagStr}}</view>
					</view>
					<view class="li">
						<view class="span">品牌</view>
						<view class="num span" style="float: right" >{{samplebook.brandName}}</view>
					</view>
				</view>

				<view class="btn a" @click="confirm()">确定</view>
				<view class="warnText p">更多样册信息请登录pc端后台进行修改（PC端打开网址：www.nocexpo.com，点击右上角“供应商后台”按钮登录维护）</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sampleApi from '@/api/samplebook.js'
	import commonApi from '@/utils/commonMethod.js';
	
	export default {
		data() {
			return {
				samplebook: {},
				currentUser:{},
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		async onLoad(options) {
			const samplebookId = options.samplebookId
			await this.getSamplebookInfoById(samplebookId)
			
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
			
			const currentUser = await commonApi.currentUserAxios();
			this.currentUser = currentUser.data.session_user_h5;
		   
		},
		onShow(){
		  
		  setTimeout(()=> {
		    
		    if (getApp().globalData.onShow) {
		      getApp().globalData.onShow = 0;
		      console.log("demo前后台切换之切到前台")
		    }
		    else {
		      console.log("demo页面被切换显示")
		      this.startTime = +new Date();
		    }
		    
		  }, 100);
		},
		onHide(){
		  setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		onUnload(){
		    setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		methods: {
			saveFootPrint(stayTime){
			    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"样册编辑")
			  			
			},
			confirm(){
				uni.showModal({
					title: "提交",
					content: "是否提交",
					showCancel:false,
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
							that.submit()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
			},
			getSamplebookInfoById(id) {
				sampleApi.getSamplebookInfoById(id).then(res =>{
					this.samplebook = res.data.nocSampleBook
					this.samplebook.tagStr = ''
					this.samplebook.tagList.forEach((value,index,array)=>{
						this.samplebook.tagStr = this.samplebook.tagStr + value.tagName+','
					})
					this.samplebook.tagStr = this.samplebook.tagStr.substring(0,this.samplebook.tagStr.length-1)
				})
				
			},
			//提交产品
			submit(){
				sampleApi.updateSample(this.samplebook).then(res=>{
					uni.showModal({
						title: "提交",
						content: "提交成功",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/statistics/samplebook'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						} 
					});
				})
			}
	
		},
	}
</script>

<style>
	.edit {
	    padding-bottom: 28rpx;
	}
	.edit .ul {
	    background: #fff;
	    padding: 0 28rpx;
	    margin-bottom: 75rpx;
	}
	.edit .li {
	    border-top: 1px solid #f5f5f5;
	    height: 91rpx;
	}
	.edit .li .span {
	    float: left;
	    font-size: 26rpx;
	    color: #1a1a1a;
	    line-height: 91rpx;
	}
	.edit .li input {
	    float: right;
	    border: 0;
	    height: 91rpx;
	    line-height: 91rpx;
	    display: inline-block;
	    text-align: right;
	    font-size: 26rpx;
	    width: 60%;
	    color: #8f9aa8;
	}
	.edit .li input.num {
	    color: #fc5260;
	}
	.shortSelect {
	    float: right;
	    height: 91rpx;
	    width: 78%;
	    line-height: 91rpx;
	    border: 0rem;
	    font-size: 26rpx;
	    color: #8f9aa8;
	    direction: rtl;
	    background-color: white;
	}
	.showExhibition {
	    font-size: 26rpx;
	    line-height: 91rpx;
	    color: #8f9aa8;
	    text-align: center;
	}
	
	.edit .btn {
	    width: 644rpx;
	    margin: 0 auto;
	    display: block;
	    height: 91rpx;
	    background: #029e9d;
	    color: #fff;
	    text-align: center;
	    line-height: 91rpx;
	    font-size: 32rpx;
	    border-radius: 46rpx;
	}
	.warnText {
	    color: red;
	    font-size: 28rpx;
	    margin-top: 35rpx;
	}
</style>